<template>
  <view class="hb-p-4 hb-flex hb-items-center" :style="{ backgroundColor: getStatusColor }">
    <TmIcon class="hb-flex-shrink-0" :name="getIconName" color="#fff" :font-size="96" />
    <view class="hb-flex-1 hb-ml-3" >
      <TmText _class="hb-font-bold hb-mb-1" :label="getStatusText" color="#fff" :font-size="48" />
      <TmText :label="`申请时间：${createTime}`" color="#fff" :font-size="28" />
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ReviewStatusEnum } from '@/enums/PublicEnum';

  const props = defineProps<{
    status: ReviewStatusEnum;
    createTime: string;
    type: 'friend' | 'circle';
  }>();

  const getIconName = computed(() => {
    if (props.status === ReviewStatusEnum.PENDING) {
      return 'ali-icon icon-history';
    }
    if (props.status === ReviewStatusEnum.APPROVED) {
      return 'ali-icon icon-danxuan_xuanzhong';
    }
    if (props.status === ReviewStatusEnum.REJECTED) {
      return 'ali-icon icon-close_circle_fill';
    }
    return '';
  });

  const getStatusColor = computed(() => {
    if (props.status === ReviewStatusEnum.PENDING) {
      return '#E29942';
    }
    if (props.status === ReviewStatusEnum.APPROVED) {
      return '#2878FF';
    }
    if (props.status === ReviewStatusEnum.REJECTED) {
      return '#EA5E0E';
    }
    return '';
  });

  const getStatusText = computed(() => {
    if (props.status === ReviewStatusEnum.PENDING) {
      return '待审核';
    }
    if (props.status === ReviewStatusEnum.APPROVED) {
      return props.type === 'friend' ? '已添加' : '已同意';
    }
    if (props.status === ReviewStatusEnum.REJECTED) {
      return '已拒绝';
    }
    return '';
  });
</script>

<style scoped>

</style>